<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
		</theme-navbar>
		<!-- #endif -->
		<view class="content">

			<view>
				<view class="It-title">
					<view class="CT-title">
						文书号: {{detailInfo.fullDocNo}}
					</view>
				</view>
				<u-row class="pd-tp">
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							案件编号
						</view>
						<view class="CT-value">
							{{detailInfo.caseCode}}
						</view>
					</u-col>
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							立案编号
						</view>
						<view class="CT-value">
							{{detailInfo.regDocNo}}
						</view>
					</u-col>
				</u-row>
				<u-row class="pd-tp">
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							案发时间
						</view>
						<view class="CT-value">
							{{detailInfo.caseDate}}
						</view>
					</u-col>
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							当事人
						</view>
						<view class="CT-value">
							{{detailInfo.party}}
						</view>
					</u-col>
				</u-row>
				<u-row class="pd-tp">
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							案件性质
						</view>
						<view class="CT-value">
							{{detailInfo.caseProperty}}
						</view>
					</u-col>
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							案发地点
						</view>
						<view class="CT-value">
							{{detailInfo.storeName}}
						</view>
					</u-col>
				</u-row>
                <u-row class="pd-tp">
					<u-col span="12" class="pd-lf">
						<view class="CT-label">
							承办人
						</view>
						<view class="CT-value">
							{{detailInfo.undertaker}}
						</view>
					</u-col>
					<!-- <u-col span="6" class="pd-lf">
						<view class="CT-label">
							案发地点
						</view>
						<view class="CT-value">
							{{detailInfo.storeName}}
						</view>
					</u-col> -->
				</u-row>
				<!-- <u-row class="pd-tp">
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							库位
						</view>
						<view class="CT-value main-info">
							<u-image src="/static/store/store-home.png" width="41" height="45" /> {{detailInfo.psCode}}
						</view>
					</u-col>
					<u-col span="6" class="pd-lf">
						<view class="CT-label">
							物品总数
						</view>
						<view class="CT-value main-info">
							{{toatlQty}}
						</view>
					</u-col>
				</u-row> -->

			</view>
			<view style="border-bottom: 20rpx solid #f2f3f5;margin: 26rpx -56rpx;"></view>
			<view class="form-style" style="line-height: 62rpx;">
				<view class="form-style-title">
					<!-- 仓库改造 -->
					<view class="fs-content">
						<view class="left-info-tag" style="margin-top:14rpx"></view>
						<view class="fs-title">物品数量</view>
					</view>
					<!-- 仓库改造 -->
				</view>
				<view v-if="goodsList.length == 0" class="nomore">
					<view>暂无数据</view>
				</view>
				<view v-else>
					<view v-for="(item,index) in goodsList" :key="index"
						style="border-bottom:1px solid #DADADD;font-size:26rpx;margin: 10px 0;">
						<u-swipe-action :show="item.show" :index="item.qrDtlUuid"
							:disabled="item.swiperDisabled" :options="item.swiperOption">
							<view style="font-size:30rpx">
								{{item.goodsName}}
							</view>
					
							<u-row gutter="16">
								<u-col span="3">
									<view class="part-item-info">
										<view class="sub-title">
											物品大类
										</view>
										<view class="main-info">
											{{item.propTypeName}}
										</view>
									</view>
								</u-col>
								<u-col span="3">
									<view class="part-item-info">
										<view class="sub-title">
											物品数量
										</view>
										<view class="main-info">
											{{ item.qty?item.qty:0 }}
										</view>
									</view>
								</u-col>
								<u-col span="3">
									<view class="part-item-info">
										<view class="sub-title">
											抽样数量
										</view>
										<view class="main-info">
											{{ item.sampleQty?item.sampleQty:0 }}
										</view>
									</view>
								</u-col>
                                <u-col span="3">
									<view class="part-item-info">
										<view class="sub-title">
											单位
										</view>
										<view class="main-info">
											{{ item.unit?item.unit:'' }}
										</view>
									</view>
								</u-col>
							</u-row>
						</u-swipe-action>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import storeService from '@/service/store/store.service.js';
	export default {
		
		data() {
			return {
				goodsList: [],
				detailInfo: {},
				toatlQty:0,//物品总数
			};
		},
		// 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
		mounted() {

		},
		onLoad() {
			this.detailInfo = this.getRouteParam();
			this.initData()
		},
		methods: {
			initData(){
				this.$modal.showLoading("数据加载中...")
				storeService.docDetail(this.detailInfo).then((res)=>{
					this.$modal.hideLoading();
					if(res.success) {
                        this.detailInfo = Object.assign(this.detailInfo,res.bean)
						this.goodsList = this.updateSwiperOptionByRes(res.bean.goodsList)
					} else {
						this.goodsList = [];
						this.$u.toast(res.msg);
					}
				}).catch((err)=>{
					this.$modal.hideLoading();
					this.goodsList = [];
					console.log(err)
					this.$u.toast(err.msg);
				})
			},
			refreshSwiperPlan() {
				let self = this;
				this.goodsList.map((val, idx) => {
					val.show = false;
					self.$set(val, 'show', false);
					return true;
				});
			},
			updateSwiperOptionByRes(arr){
				this.toatlQty = 0;
				arr && arr.forEach(itm => {
					itm.show = false;
					itm.swiperDisabled = true;
					itm.swiperOption = [];
					this.toatlQty += Number(itm.qty);
					if(this.detailInfo.isAddGoods) {
						itm.swiperOption = [
							{
								text: '删除',
								action: 'del',
								style: {
									backgroundColor: "red"
								},
							}
						]
						itm.swiperDisabled = false;
					} 
				})
				return arr;
			},
			updateBackState(param) {
			  this.initData()
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding: 14px 10px;
	}

	.upload-sty {
		margin-left: -12rpx;
	}

	.pd-lf {
		padding-left: 0;
	}

	.pd-tp {
		padding-top: 13px;
	}

	.content {
		// padding: 24rpx 36rpx 180rpx 36rpx;
		padding-bottom: 180rpx;
	}

	.content-btn {
		padding: 24rpx 36rpx 20rpx 36rpx;
	}

	.fs-30 {
		font-size: 30rpx
	}

	.It-title {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #DADADD;
		padding-bottom: 11px;
		align-items: center;
	}

	.CT-title {
		font-size: 18px;
		font-weight: bold;
		color: #0070D2;
	}

	.CT-label {
		font-size: 13px;
		color: #989EA1;
		padding-bottom: 6px;
	}

	.CT-value {
		font-size: 14px;
		color: #393B3D;
		word-break: break-all;
	}

	.form-style-title {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		width: 100%;
		align-items: flex-start;
	}

	.form-style {
		padding: 0rpx 8rpx
	}

	.left-info-tag {
		padding: 8px 2px;
		background-color: #ee8c4f;
		border-radius: 22px;
		margin: 3px 6px 13px 0px;
	}

	.left-info-check-tag {
		padding: 8px 2px;
		background-color: #ee8c4f;
		border-radius: 22px;
		margin: 3px 6px 13px 0px;
	}

	.fs-title {
		font-weight: bold;
		font-size: 32rpx;
	}

	.loc-box {
		line-height: 38px;
		padding: 11px 0;
		font-size: 13px;
		color: #303133;
	}

	.inline-box {
		display: flex;
		align-items: center;
	}

	.loc-inline {
		font-size: 13px;
		color: #666666;
	}

	.part-item-info {
		text-align: left;

		.sub-title {
			color: $u-tips-color;
			padding-bottom: 10rpx;
			font-size: 26rpx;
		}

		.main-info-color {
			color: $u-content-color;
			font-weight: 600;
			margin-bottom: 5px;
			color: #0070D2;
		}
	}

	.main-info {
		color: $u-content-color;
		font-weight: 600;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
	}

	.total-sty {
		padding-top: 20rpx;
	}

	.good-popup-lay {
		padding: $cm-content-paddng-row;
		width: 100%;
		height: 100%;

		&__title {
			font-size: 36rpx;
			font-weight: 600;
			color: $u-main-color;
			margin: 10rpx 0;
			text-align: center;
			width: 100%;
		}

		&__btns {
			width: 100%;
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			uni-button {
				flex: 0.28;
			}
		}
	}

	.fs-content {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		align-content: center;
		align-items: stretch;
		text-align: center;
		flex-wrap: nowrap;
	}

	.form-style-title {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 100%;
		align-items: flex-start;
		color: $u-main-color
	}
	.nomore {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		font-size: 14px;
		background-color: #F5F5F5;
	}
</style>